<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>家庭药品管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
            background: linear-gradient(135deg, #E8EAF6 0%, #F3E5F5 50%, #FCE4EC 100%);
            min-height: 100vh;
        }

        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .stat-card {
            transition: all 0.3s;
            cursor: pointer;
        }

        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
        }

        .stat-card:active {
            transform: scale(0.95);
        }

        .progress-ring {
            transform: rotate(-90deg);
            transition: stroke-dashoffset 0.8s ease;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .float-animation {
            animation: float 3s ease-in-out infinite;
        }

        /* 手机状态栏占位 */
        .status-bar-spacer {
            height: 28px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            position: relative;
            z-index: 999;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in {
            animation: fadeIn 0.5s ease-out forwards;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.5;
            }
        }

        .pulse-animation {
            animation: pulse 2s ease-in-out infinite;
        }

        .completed {
            opacity: 0.6;
            text-decoration: line-through;
        }

        /* 搜索弹窗 */
        .search-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 100;
        }

        .search-modal.active {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: 20px;
        }

        /* 通知弹窗 */
        .notification-modal {
            display: none;
            position: fixed;
            top: 0;
            right: 0;
            width: 100%;
            max-width: 400px;
            height: 100%;
            background: white;
            box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
            z-index: 100;
            transform: translateX(100%);
            transition: transform 0.3s ease;
        }

        .notification-modal.active {
            display: block;
            transform: translateX(0);
        }
    </style>
</head>

<body>
    <!-- 手机状态栏占位 -->
    <div class="status-bar-spacer"></div>

    <!-- 主容器 -->
    <div class="min-h-screen pb-20">
        <!-- 顶部导航 -->
        <div class="glass-card px-5 py-4 flex items-center justify-between">
            <div class="flex items-center gap-4">
                <div
                    class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center shadow-lg">
                    <span class="text-2xl">💊</span>
                </div>
                <div>
                    <h1 class="text-lg font-bold text-gray-900">家庭药品</h1>
                    <p class="text-xs text-gray-500" id="greetingText">Hello, 王先生</p>
                </div>
            </div>
            <div class="flex items-center gap-3">
                <button id="searchBtn"
                    class="w-10 h-10 bg-white rounded-xl flex items-center justify-center shadow-sm hover:shadow-md transition-all hover:scale-110">
                    <i class="fas fa-search text-gray-600"></i>
                </button>
                <button id="notificationBtn"
                    class="w-10 h-10 bg-white rounded-xl flex items-center justify-center shadow-sm hover:shadow-md transition-all hover:scale-110 relative">
                    <i class="fas fa-bell text-gray-600"></i>
                    <span id="notificationBadge"
                        class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center pulse-animation">3</span>
                </button>
            </div>
        </div>

        <!-- 内容区域 -->
        <div class="px-5 py-6 space-y-6">
            <!-- 统计卡片 - 4个并排 -->
            <div class="grid grid-cols-2 gap-4" id="statsContainer">
                <!-- 总药品数 -->
                <div class="stat-card bg-gradient-to-br from-green-100 to-green-50 rounded-3xl p-5 shadow-lg border-2 border-white fade-in"
                    onclick="navigateTo('medicine_management.html')">
                    <div class="relative">
                        <svg class="w-16 h-16 mx-auto mb-2" viewBox="0 0 36 36">
                            <circle cx="18" cy="18" r="16" fill="none" stroke="#e5e7eb" stroke-width="3" />
                            <circle cx="18" cy="18" r="16" fill="none" stroke="#10b981" stroke-width="3"
                                stroke-dasharray="75.4" stroke-dashoffset="75.4" class="progress-ring"
                                id="totalMedicineProgress" />
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <i class="fas fa-pills text-green-600 text-xl"></i>
                        </div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-green-900 mb-1" id="totalMedicines">24</div>
                        <div class="text-xs text-green-700 font-medium">总药品数</div>
                    </div>
                </div>

                <!-- 即将过期 -->
                <div class="stat-card bg-gradient-to-br from-orange-100 to-orange-50 rounded-3xl p-5 shadow-lg border-2 border-white fade-in"
                    style="animation-delay: 0.1s" onclick="showExpiringMedicines()">
                    <div class="relative">
                        <svg class="w-16 h-16 mx-auto mb-2" viewBox="0 0 36 36">
                            <circle cx="18" cy="18" r="16" fill="none" stroke="#e5e7eb" stroke-width="3" />
                            <circle cx="18" cy="18" r="16" fill="none" stroke="#f59e0b" stroke-width="3"
                                stroke-dasharray="75.4" stroke-dashoffset="75.4" class="progress-ring"
                                id="expiringProgress" />
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <i class="fas fa-exclamation-triangle text-orange-600 text-xl"></i>
                        </div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-orange-900 mb-1" id="expiringCount">2</div>
                        <div class="text-xs text-orange-700 font-medium">即将过期</div>
                    </div>
                </div>

                <!-- 待服用药品 -->
                <div class="stat-card bg-gradient-to-br from-purple-100 to-purple-50 rounded-3xl p-5 shadow-lg border-2 border-white fade-in"
                    style="animation-delay: 0.2s" onclick="navigateTo('reminder.html')">
                    <div class="relative">
                        <svg class="w-16 h-16 mx-auto mb-2" viewBox="0 0 36 36">
                            <circle cx="18" cy="18" r="16" fill="none" stroke="#e5e7eb" stroke-width="3" />
                            <circle cx="18" cy="18" r="16" fill="none" stroke="#8b5cf6" stroke-width="3"
                                stroke-dasharray="75.4" stroke-dashoffset="75.4" class="progress-ring"
                                id="pendingProgress" />
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <i class="fas fa-clock text-purple-600 text-xl"></i>
                        </div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-purple-900 mb-1" id="pendingCount">3</div>
                        <div class="text-xs text-purple-700 font-medium">待服用</div>
                    </div>
                </div>

                <!-- 按时服药率 -->
                <div class="stat-card bg-gradient-to-br from-pink-100 to-pink-50 rounded-3xl p-5 shadow-lg border-2 border-white fade-in"
                    style="animation-delay: 0.3s" onclick="showComplianceDetails()">
                    <div class="relative">
                        <svg class="w-16 h-16 mx-auto mb-2" viewBox="0 0 36 36">
                            <circle cx="18" cy="18" r="16" fill="none" stroke="#e5e7eb" stroke-width="3" />
                            <circle cx="18" cy="18" r="16" fill="none" stroke="#ec4899" stroke-width="3"
                                stroke-dasharray="75.4" stroke-dashoffset="75.4" class="progress-ring"
                                id="complianceProgress" />
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <i class="fas fa-chart-line text-pink-600 text-xl"></i>
                        </div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-pink-900 mb-1" id="complianceRate">89%</div>
                        <div class="text-xs text-pink-700 font-medium">服药率</div>
                    </div>
                </div>
            </div>

            <!-- 今日提醒卡片 -->
            <div class="glass-card rounded-3xl p-5 shadow-lg fade-in" style="animation-delay: 0.4s">
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center gap-2">
                        <div
                            class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-500 rounded-xl flex items-center justify-center">
                            <i class="fas fa-bell text-white text-sm"></i>
                        </div>
                        <span class="font-bold text-gray-900">今日提醒</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <span class="text-2xl font-bold text-gray-900" id="completedReminders">0</span>
                        <span class="text-sm text-gray-500">/</span>
                        <span class="text-sm text-gray-500" id="totalReminders">0</span>
                        <span class="text-sm text-gray-500">项</span>
                    </div>
                </div>

                <!-- 进度条 -->
                <div class="relative h-3 bg-gray-100 rounded-full overflow-hidden mb-4">
                    <div id="reminderProgress"
                        class="absolute inset-y-0 left-0 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-500"
                        style="width: 0%"></div>
                </div>

                <!-- 提醒列表 -->
                <div id="reminderList" class="space-y-3">
                    <!-- 动态加载 -->
                </div>

                <button onclick="navigateTo('reminder.html')"
                    class="w-full mt-4 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-2xl font-semibold hover:shadow-lg transition-all hover:scale-105">
                    查看全部提醒 →
                </button>
            </div>

            <!-- 快速操作 -->
            <div class="glass-card rounded-3xl p-5 shadow-lg fade-in" style="animation-delay: 0.5s">
                <div class="flex items-center gap-2 mb-4">
                    <div
                        class="w-8 h-8 bg-gradient-to-br from-orange-500 to-pink-500 rounded-xl flex items-center justify-center">
                        <i class="fas fa-bolt text-white text-sm"></i>
                    </div>
                    <span class="font-bold text-gray-900">快速操作</span>
                </div>

                <div class="grid grid-cols-4 gap-3">
                    <a href="add_medicine.html"
                        class="flex flex-col items-center p-4 bg-gradient-to-br from-green-100 to-green-50 rounded-2xl hover:shadow-lg transition-all hover:scale-105">
                        <div class="w-14 h-14 bg-white rounded-2xl flex items-center justify-center mb-2 shadow-sm">
                            <i class="fas fa-plus text-green-600 text-xl"></i>
                        </div>
                        <span class="text-xs font-medium text-gray-700">添加</span>
                    </a>

                    <a href="medicine_management.html"
                        class="flex flex-col items-center p-4 bg-gradient-to-br from-blue-100 to-blue-50 rounded-2xl hover:shadow-lg transition-all hover:scale-105">
                        <div class="w-14 h-14 bg-white rounded-2xl flex items-center justify-center mb-2 shadow-sm">
                            <i class="fas fa-pills text-blue-600 text-xl"></i>
                        </div>
                        <span class="text-xs font-medium text-gray-700">药品</span>
                    </a>

                    <a href="reminder.html"
                        class="flex flex-col items-center p-4 bg-gradient-to-br from-orange-100 to-orange-50 rounded-2xl hover:shadow-lg transition-all hover:scale-105">
                        <div class="w-14 h-14 bg-white rounded-2xl flex items-center justify-center mb-2 shadow-sm">
                            <i class="fas fa-bell text-orange-600 text-xl"></i>
                        </div>
                        <span class="text-xs font-medium text-gray-700">提醒</span>
                    </a>

                    <a href="family.html"
                        class="flex flex-col items-center p-4 bg-gradient-to-br from-purple-100 to-purple-50 rounded-2xl hover:shadow-lg transition-all hover:scale-105">
                        <div class="w-14 h-14 bg-white rounded-2xl flex items-center justify-center mb-2 shadow-sm">
                            <i class="fas fa-users text-purple-600 text-xl"></i>
                        </div>
                        <span class="text-xs font-medium text-gray-700">成员</span>
                    </a>
                </div>
            </div>

            <!-- 健康小贴士卡片 -->
            <div id="healthTipsCard"
                class="glass-card rounded-3xl p-6 shadow-lg bg-gradient-to-br from-pink-50 to-purple-50 relative overflow-hidden fade-in"
                style="animation-delay: 0.6s">
                <div class="absolute -right-8 -bottom-8 text-8xl opacity-10 float-animation">🐻</div>
                <div class="relative z-10">
                    <div class="flex items-start gap-3 mb-3">
                        <div
                            class="w-10 h-10 bg-gradient-to-br from-yellow-400 to-orange-400 rounded-xl flex items-center justify-center shadow-lg">
                            <span class="text-xl">💡</span>
                        </div>
                        <div class="flex-1">
                            <h3 class="font-bold text-gray-900 mb-1">健康小贴士</h3>
                            <p id="healthTipContent" class="text-sm text-gray-600 leading-relaxed">
                                根据您的用药记录，建议定期补充维生素D，有助于提高钙质吸收和免疫力。保持规律的作息，定时服药哦！💪
                            </p>
                        </div>
                    </div>
                    <div class="flex items-center justify-between mt-4">
                        <div class="flex gap-1">
                            <span class="w-2 h-2 bg-purple-400 rounded-full"></span>
                            <span class="w-2 h-2 bg-gray-300 rounded-full"></span>
                            <span class="w-2 h-2 bg-gray-300 rounded-full"></span>
                        </div>
                        <button onclick="nextHealthTip()"
                            class="text-xs text-purple-600 font-semibold hover:text-purple-700">
                            下一条 →
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 glass-card px-5 py-3 border-t border-gray-100">
        <div class="flex items-center justify-around">
            <a href="index.html" class="flex flex-col items-center gap-1 text-purple-600">
                <div
                    class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-home text-white"></i>
                </div>
                <span class="text-xs font-semibold">首页</span>
            </a>
            <a href="medicine_management.html" class="flex flex-col items-center gap-1 text-gray-400">
                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-sm">
                    <i class="fas fa-pills"></i>
                </div>
                <span class="text-xs font-medium">药品</span>
            </a>
            <a href="add_medicine.html" class="flex flex-col items-center gap-1 text-gray-400">
                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-sm">
                    <i class="fas fa-plus-circle"></i>
                </div>
                <span class="text-xs font-medium">添加</span>
            </a>
            <a href="reminder.html" class="flex flex-col items-center gap-1 text-gray-400">
                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-sm">
                    <i class="fas fa-bell"></i>
                </div>
                <span class="text-xs font-medium">提醒</span>
            </a>
            <a href="profile.html" class="flex flex-col items-center gap-1 text-gray-400">
                <div class="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-sm">
                    <i class="fas fa-user"></i>
                </div>
                <span class="text-xs font-medium">我的</span>
            </a>
        </div>
    </div>

    <!-- 搜索弹窗 -->
    <div id="searchModal" class="search-modal">
        <div class="glass-card rounded-3xl p-6 w-full max-w-md mx-4 fade-in">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-bold text-gray-900">搜索药品</h3>
                <button onclick="closeSearchModal()"
                    class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center hover:bg-gray-200">
                    <i class="fas fa-times text-gray-600"></i>
                </button>
            </div>
            <input type="text" id="searchInput" placeholder="输入药品名称..."
                class="w-full px-4 py-3 bg-gray-50 border-2 border-gray-100 rounded-2xl text-sm focus:outline-none focus:border-purple-300 mb-4">
            <div id="searchResults" class="space-y-2 max-h-60 overflow-y-auto">
                <!-- 搜索结果 -->
            </div>
        </div>
    </div>

    <!-- 通知弹窗 -->
    <div id="notificationModal" class="notification-modal">
        <div class="p-6 h-full flex flex-col">
            <div class="flex items-center justify-between mb-6">
                <h3 class="text-lg font-bold text-gray-900">通知中心</h3>
                <button onclick="closeNotificationModal()"
                    class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center hover:bg-gray-200">
                    <i class="fas fa-times text-gray-600"></i>
                </button>
            </div>
            <div id="notificationList" class="flex-1 overflow-y-auto space-y-3">
                <!-- 通知列表 -->
            </div>
        </div>
    </div>

    <script src="js/app.js"></script>
</body>

</html>